<template>
	<div class="all-box">
        <web-header title="水电燃气费"></web-header>
	
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, getCurrentInstance, computed } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { storeToRefs } from "pinia";
import { CostCalculateStore } from "@/store/costCalculate";
import dayjs from "dayjs";
import { CostConfig, CostCategory, RoomType, CostInfo, CostInfoChildren, PayRoomInfo, CostAddUpInfo, CostRoomConfig } from "@/interface/costCalculate";

const { proxy } = useCurrentInstance();

const costCalculateStore = CostCalculateStore();
let { costConfigs, currentCostCategory, currentCostInfo } = storeToRefs(costCalculateStore);

const addUps = ref<CostAddUpInfo[]>([]);

onMounted(() => {
    

});
</script>

<style lang="scss" scoped>

.total-box {
	background-color: #fff;
	.item-cell {
		display: flex;
		padding: 0.16rem;
		.item-title {
			font-size: 0.14rem;
			color: #666;
			width: 0.7rem;
		}
		.item-value {
			font-size: 0.16rem;
			color: #333;
		}
		&:nth-child(n + 2) {
			border-top: 1px solid #e0e0e0;
		}
	}
	.item-date {
				.item-value {
					color: #3369fe;
				}
			}
}

.detail-box {
	margin-top: 0.2rem;
	// padding: 0.2rem 0;
	.detail-title {
		font-size: 0.15rem;
		color: #333;
		padding-left: 0.1rem;
	}
	.title-addUp {
		color: #dd1717;
		font-size: .2rem;
	}
	.section-box {
		margin-top: 0.1rem;
		border-radius: 0.04rem;
		background-color: #fff;
		.cell-box {
			display: flex;
			flex-wrap: wrap;
			padding: 0.1rem 0;
			.item-cell {
				width: 40%;
				display: flex;
				flex-wrap: wrap;
				padding: 0.1rem 0.16rem;
				align-items: center;
				.item-title {
					font-size: 0.14rem;
					color: #666;
					width: 0.7rem;
				}
				.item-value {
					font-size: 0.16rem;
					color: #333;
				}
				.value-desc {
					font-size: 0.14rem;
					color: #999;
				}
			}
			.item-date,
			.item-addUp {
				width: 100%;
			}
			.item-date {
				.item-value {
					color: #3369fe;
				}
			}
		}
	}
}

.footer-wrap {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0.1rem;
	margin-top: 0.15rem;
	color: #3369fe;
}
</style>
